<!DOCTYPE html>
<html>

<head lang="en">
    <title>常用但是不容易记忆的CSS</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./css/base.css">
    <style type="text/css" media="screen">
    body {
        font: 16px/18px \5FAE\8F6F\96C5\9ED1;
    }
    
    label {
        color: red;
        font-size: 12px;
    }
    header{
        font-size: 38px;
        color: #999;
        margin:30px auto;
        width: 100%;
        text-align: center;
    }
    section {
        padding: 30px;
    }
    
    section>* {
        margin-top: 10px;
    }
    section>a {
        color: blue;
        text-decoration: underline;
    }
    /*****input[type=number]右边的spinners*******/
    
    input[type='number'] {
        -moz-appearance: textfield;
    }
    
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    /****select控件内部的小三角*****/
    
    section select {
        -webkit-appearance: none;
        -moz-appearance: none;
        padding:1px 10px;
        text-align: center;
    }
    /******placeholder样式*********/
    
    input::-moz-placeholder {
        color: #006666;
        font-size: 14px;
    }
    
    input:-ms-input-placeholder {
        color: #006666;
        font-size: 14px;
    }
    
    input::-webkit-input-placeholder {
        color: #006666;
        font-size: 14px;
    }
    </style>
</head>

<body>
<header id="header" class="header">
    模型驱动插件&实用不易记忆的css
</header><!-- /header -->
    <section id="myModel">
        <a href="js/jquery-model.js" target="_blank" title="查看插件源码">点击查看源码jquery-model.js</a><br> 
        <br> <br> <br> 
        用户名：<span data-model="username"></span>
        <br> 密码：
        <input type="text" data-model="company" name="company" value="">
        <br> 手机号码：
        <input type="number" data-model="phone" name="phone" value="" placeholder="">
        <label>去掉number类型的输入框内部右侧的上下箭头</label>
        <br> 地址：
        <select data-model="address" name="province">
            <option value="1">北京</option>
            <option value="2">河北</option>
            <option value="3">山西</option>
            <option value="4">陕西</option>
        </select>
        <label>去掉select控件内部右侧的小三角</label>
        <br>
        邮箱：<input type="text" name="email" value="" placeholder="请输入您的邮箱">
        <label>placeHolder样式</label>
        <br>
    </section>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="js/jquery.ModelDriver.1.1.0.js" type="text/javascript"></script>
    <script>
    var _ajaxResult = {
        username: "Brose",
        company: "中南海",
        phone: "18392121466",
        address: 4
    }
    $(function() {
        $("#myModel").modelDriver(_ajaxResult);
    });
    </script>
</body>

</html>
